<template>
    <div class="linebtn">
          <div class="btn" v-if="menuType[0]" :class="idx=='0'?'select':''"><router-link v-if="idx!='0'" class="link-type" :to="'/aiManage/transfer_knowledge'">AI知识库</router-link><span v-else>AI知识库</span></div>
          <div class="btn" v-if="menuType[1]" :class="idx=='1'?'select':''"><router-link v-if="idx!='1'" class="link-type" :to="'/aiManage/violating_words'">违规词监测</router-link><span v-else>违规词监测</span></div>
          <div class="btn" v-if="menuType[2]" :class="idx=='2'?'select':''"><router-link v-if="idx!='2'" class="link-type" :to="'/aiManage/monitor'">提醒词监控</router-link><span v-else>提醒词监控</span></div>
          <div class="btn" v-if="menuType[3]" :class="idx=='3'?'select':''"><router-link v-if="idx!='3'" class="link-type" :to="'/aiManage/model'">模型设置</router-link><span v-else>模型设置</span></div>
      </div>
</template>
<script>
  export  default {
    name:"nabar",
    props:{
      index:String,
    },
    data() {
      return {
         idx:'0',
         menu:['/aiManage/transfer_knowledge','/aiManage/violating_words','/aiManage/monitor','/aiManage/model'],
         menuType:[false,false,false,false],
      }
    },
    watch:{
      index: {
        handler(newValue,oldValue){
        this.init()
        },
        deep: true
      }
    },
    created(){
      if(this.$store.state.permission.menuRouters!=""&&this.$store.state.permission.menuRouters!=null){
        var arr=this.$store.state.permission.menuRouters
        arr.forEach(element => {
          if(element.name=="AiManage"){
            if(element.children){
              element.children.forEach(item => {
                 if(this.menu.indexOf("/aiManage/"+item.path)!=-1){
                   this.menuType[this.menu.indexOf("/aiManage/"+item.path)]=true
                 }
              })
            }
          }
        });
      }
    },
    mounted(){
        this.init()
    },
    methods: {
      init(){
        this.idx=this.index
      }
    }
  }
  
  </script>
  
  <style scoped lang="scss">
     .linebtn{
          display: flex;
          margin: -10px 0 10px 5px;
          height: 38px;
          .btn{
              width: 90px;
              text-align: center;
              line-height: 38px;
              font-size: 14px;
              color: #8c8c8c;
              margin-right: 10px;
              border: 1px solid #eaeff2;
              background-color: #fff;
              border-radius: 5px;
              .link-type{
                color: #8c8c8c;
              }
          }
          .select{
              background-color: #eaf6ff;
              border:1px solid #288dfc;
              color: #288dfc;
              font-weight: 550;
          }
    }
  </style>
  